<template>
  <div class="toolbar-container">
    <div class="left-toolbar">
      <RadioGroup button-style="solid" v-model:value="state.leftToolbarTab" @change="handleChangeTerminalType">
        <RadioButton value="pc">{{ t("PC") }}</RadioButton>
        <RadioButton value="pad">{{ t("Pad") }}</RadioButton>
        <RadioButton value="h5">{{ t("H5") }}</RadioButton>
      </RadioGroup>
    </div>

    <div class="right-toolbar">
      <div class="right-toolbar-con">
        <a-button v-if="showToolButton('clearDesignerButton')" type="link" danger @click="clearFormWidget">
          <Icon icon="i-ant-design:delete-outlined" :size="18" />
          清空
        </a-button>

        <a-button v-if="showToolButton('previewFormButton')" type="link" @click="handlePreviewSelect">
          <Icon icon="i-ant-design:compress-outlined" :size="18" />
          预览
        </a-button>

        <a-button v-if="showToolButton('exportJsonButton')" type="link" @click="exportJson"> 导出JSON </a-button>
      </div>
    </div>
    <ExportJson @register="registerExportJson" />
    <PreviewSelect @register="registerPreviewSelect" @success="handleOpenPreview" />
    <Preview @register="registerPreview" />
  </div>
</template>
<script lang="ts" name="diy-form-setting-panel" setup>
  import { ref, toRef, onMounted, toRaw, nextTick, Ref } from "vue"
  import type { CSSProperties } from "vue"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { Icon } from "/@/components/Icon"
  import ExportJson from "./ExportJson.vue"
  import PreviewSelect from "./PreviewSelect.vue"
  import Preview from "./Preview.vue"
  import { Tabs, RadioGroup, RadioButton } from "ant-design-vue"
  import { useModal } from "/@/components/Modal"
  import { useDrawer } from "/@/components/Drawer"
  import * as utils from "/@/utils/index"
  // import infraApi from '/@/api/infra/index'
  // import templateContent  from './template'
  import type { Designer } from "../type"

  const [registerExportJson, { openDrawer: openExportJson }] = useDrawer()
  const [registerPreviewSelect, { openModal: openPreviewSelect }] = useModal()
  const [registerPreview, { openDrawer: openPreview }] = useDrawer()

  const props = defineProps({
    scrollerHeight: { type: String },
    designer: { type: Object as () => Designer },
  })

  // @ts-nocheck
  const designer = (props.designer || {}) as Designer

  const data = ref<any>({
    showExportJsonFlag: false,
    jsonContent: "",
    jsonRawContent: "",
    config: {},
  }).value

  const { t } = useI18n()
  const state = ref({
    activeKey: "widgetSetting",
    leftToolbarTab: designer.terminalType,
  })

  onMounted(() => {})

  const showToolButton = (configName) => {
    return true
  }

  const handleChangeTerminalType = (type) => {
    props.designer?.changeTerminalType(type.target.value)
  }

  const clearFormWidget = () => {
    props.designer?.clearDesigner()
    // props.designer?.formWidget.clearWidgetRefList()
  }

  const genExportJson = () => {
    data.config = designer.genExportJson()
    data.jsonContent = JSON.stringify(data.config, null, "  ")
    data.jsonRawContent = JSON.stringify(data.config)
  }

  const exportJson = async () => {
    genExportJson()

    // const resp = await infraApi.codeGen.renderTemplate([
    //   { name: 'test', content: templateContent['vbenForm'], params: { widgetList: newWidgetList, globalConfig } }
    // ])
    // console.log('resp: ', resp)

    openExportJson(true, {
      content: data.jsonContent,
    })
  }

  const handlePreviewSelect = () => {
    openPreviewSelect(true, {})
  }

  const handleOpenPreview = (select) => {
    genExportJson()
    openPreview(true, {
      config: data.config,
      select,
    })
  }
</script>

<style lang="less" scoped>
  .toolbar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row nowrap;
    justify-content: space-between;
  }

  .left-toolbar {
    height: 100%;
    display: flex;
    // margin-top: 4px;
    // float: left;
    font-size: 16px;
    // line-height: 42px;
  }

  .right-toolbar {
    display: flex;
    line-height: 42px;
    text-align: right;
    overflow: hidden;

    .right-toolbar-con {
      text-align: left;
      // width: 600px;
    }

    :deep(.ant-btn) {
      .anticon {
        margin-right: -2px;
      }
      padding: 4px 4px;
      font-size: 16px;
    }
  }
</style>
